<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.8.2.min.js"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="../layui/css/layui.css"  media="all">
</head>
<body>
<form id="seaform">
图书名字:<input type="text" name="bookname" id="bookname3"/>
图书作者:<input type="text" name="bookauthor" id="bookauthor3"/>
出版社：<select id="major" >
    <option value="">请选择</option>
  </select>
  <input type="button"  value="检索" onclick="search()"/>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>


<!-- 头部 -->
<script id="toolbarDemo" type="text/html">


  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" id="in" lay-event="getCheckData">导入</button>
 
    <button class="layui-btn layui-btn-sm" id="add" onclick="addbook()" >添加</button>
  </div>
</script>
<!-- 修改按钮 -->
<script id="barDemo" type="text/html">
  <a class="layui-btn layui-btn-xs"   lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-xs layui-btn-xs"  onclick="boroowbook()" lay-event="boroowbook">借书</a>
  <a class="layui-btn layui-btn-xs layui-btn-xs"  onclick="giveBook()" lay-event="giveBook">还书</a>
</script>
<!-- 借书 -->
<form class="layui-form" action=""  onsubmit="return false" >
<div class="layui-form-item" style="display: none" id="borrow">
<div class="layui-form-item">
      <label class="layui-form-label">借书人（教师编号/学生学号）</label>
      <div class="layui-input-inline" >
        <input name="borrowbookid" id="borrowbookid" class="layui-input" type="text" autocomplete="off" >
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-block">
       <a class="layui-btn layui-btn-xs layui-btn-xs"  onclick="borrow()" lay-event="borrow">确定</a>
    </div>
  </div>
</div>
</form>
<!-- 添加表单 -->
<form class="layui-form" action=""  onsubmit="return false" >
<div class="layui-form-item" style="display: none" id="save">

<div class="layui-form-item">
      <label class="layui-form-label">图书编号</label>
      <div class="layui-input-inline" >
        <input name="bookid" id="bookid2" class="layui-input" type="text" autocomplete="off" >
    </div>
    </div>
<div class="layui-form-item">
      <label class="layui-form-label">图书名字</label>
      <div class="layui-input-inline">
        <input name="bookname" id="bookname2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书作者</label>
      <div class="layui-input-inline">
        <input name="bookauthor" id="bookauthor2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">出版社</label>
      <div class="layui-input-inline">
        <input name="bookpress" id="bookpress2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书数量</label>
      <div class="layui-input-inline">
        <input name="booknum" id="booknum2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书类别</label>
      <div class="layui-input-inline">
        <input name="bookcate" id="bookcate2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书信息</label>
      <div class="layui-input-inline">
        <input name="bookmessage" id="bookmessage2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书价格</label>
      <div class="layui-input-inline">
        <input name="bookprice" id="bookprice2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">存放地址</label>
      <div class="layui-input-inline">
        <input name="bookaddress" id="bookaddress2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">现在馆内数量</label>
      <div class="layui-input-inline">
        <input name="onlinenum" id="onlinenum2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">被借阅次数</label>
      <div class="layui-input-inline">
        <input name="borrownum" id="borrownum2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-block">
       <a class="layui-btn layui-btn-xs layui-btn-xs"  onclick="saveBook()" >添加</a>
    </div>
  </div>
  </div>
</form>
<!-- 修改表单 -->
<form class="layui-form" action="" lay-filter="updatebook" onsubmit="return false" >
<div class="layui-form-item" style="display: none" id="up">

<div class="layui-form-item" style="display: none">
      <label class="layui-form-label">图书编号</label>
      <div class="layui-input-inline" >
        <input name="bookid" id="bookid1" class="layui-input" type="text" autocomplete="off" >
    </div>
    </div>
<div class="layui-form-item">
      <label class="layui-form-label">图书名字</label>
      <div class="layui-input-inline">
        <input name="bookname" id="bookname1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书作者</label>
      <div class="layui-input-inline">
        <input name="bookauthor" id="bookauthor1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">出版社</label>
      <div class="layui-input-inline">
        <input name="bookpress" id="bookpress1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书数量</label>
      <div class="layui-input-inline">
        <input name="booknum" id="booknum1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书类别</label>
      <div class="layui-input-inline">
        <input name="bookcate" id="bookcate1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书信息</label>
      <div class="layui-input-inline">
        <input name="bookmessage" id="bookmessage1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图书价格</label>
      <div class="layui-input-inline">
        <input name="bookprice" id="bookprice1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">存放地址</label>
      <div class="layui-input-inline">
        <input name="bookaddress" id="bookaddress1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">现在馆内数量</label>
      <div class="layui-input-inline">
        <input name="onlinenum" id="onlinenum1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">被借阅次数</label>
      <div class="layui-input-inline">
        <input name="borrownum" id="borrownum1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-block">
       <a class="layui-btn layui-btn-xs layui-btn-xs"  onclick="updateBook()" lay-event="edit">修改</a>
    </div>
  </div>
  
  </div>
</form>


<script>
var indexupdate;
var tableBookinfo;
var indexsave;
var uploadInst;
var indexborrow;
$(function(){
	search();
	//下拉框
	$.ajax({
		url:"/bookpress",
		data:{},
		dataType:"json",
		type:"post",
		success:function(res){
			if(res.length>0){
				for(var i =0;i<res.length;i++){
					$("#major").append("<option value='"+res[i]+"'>"+res[i]+"</option>");
				}
			}
		}
	})
})
function search(){
	var bookname=$("#bookname3").val();
	var bookauthor=$("#bookauthor3").val();
	var bookpress = $("#major option:selected").val();
	
	layui.use(['table','upload','form','jquery'], function(){
		 var table = layui.table;
		  var upload=layui.upload;
		  var $=layui.jquery;
		  var form=layui.form;
		  
		   tableBookinfo= table.render({
		    elem: '#test'
		    ,url:'/bookquery'
		    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			,where:{
		    	bookname:bookname,
		    	bookauthor:bookauthor,
		    	bookpress:bookpress
		    }
		    ,cols: [[
		      {field:'bookid', width:80, title: '图书编号', sort: true}
		      ,{field:'bookname', width:80, title: '图书名字'}
		      ,{field:'bookauthor', width:80, title: '图书作者'}
		      ,{field:'bookpress', width:80, title: '出版社', sort: true}
		      ,{field:'booknum', width:80, title: '图书数量'}//0学生，1老师
		      ,{field:'bookcate', title: '图书类别', minWidth: 150}
		      ,{field:'bookmessage', width:80, title: '图书信息', sort: true}
		      ,{field:'bookprice', width:80, title: '图书价格', sort: true}
		      ,{field:'bookaddress', width:80, title: '存放地址'}
		      ,{field:'onlinenum', width:135, title: '现在馆内数量', sort: true}
		      ,{field:'borrownum', width:135, title: '被借阅次数', sort: true}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
		    ]]
		    ,page: true
		  });
		   //导入
		  uploadInst = upload.render({
			    elem: '#in'			    
			    ,url:'../bookinExcel' //改成您自己的上传接口
			    ,accept:'file'//普通文件
			    ,exts:'xls|xlsx'//只允许压缩文件
			   ,method:"post"
			    ,done: function(res){
			      if(res.success){
			    	  layer.msg(res.message);
			    	  tableBookinfo.reload();
			      }
			      
			    }
			
			  });
		   
	
			 //监听行工具，修改
		   table.on('tool(test)', function(obj){
		   	 
		   		    var data = obj.data;
		   		    //console.log(obj)
		   		    if(obj.event === 'edit'){
		   		    	form.val('updatebook',data);
		   		    	indexupdate = layer.open({
		   		    		type: 1,
		   		    		title:"修改图书信息",
		   		    		area: ['500px', '550px'],
		   		    		content:$("#up")
		   		    	})
		   		    }
		   		    
		   		  })
		   		  
		   		  
		   	  
		
	})
}
	
		  		  //修改方法
		  function updateBook(){
			var bookid=$("#bookid1").val();
			var bookname=$("#bookname1").val();
			var bookauthor=$("#bookauthor1").val();
			var bookpress=$("#bookpress1").val();
			var booknum=$("#booknum1").val();
			var bookcate=$("#bookcate1").val();
			var bookmessage=$("#bookmessage1").val();
			var bookprice=$("#bookprice1").val();
			var bookaddress=$("#bookaddress1").val();
			var onlinenum=$("#onlinenum1").val();
			var borrownum=$("#borrownum1").val();
			$.ajax({
				url:"/bookupdate",
				data:{
					bookid:bookid,
					bookname:bookname,
					bookauthor:bookauthor,
					bookpress:bookpress,
					booknum:booknum,
					bookcate:bookcate,
					bookmessage:bookmessage,
					bookprice:bookprice,
					bookaddress:bookaddress,
					onlinenum:onlinenum,
					borrownum:borrownum
					
				},
				type:"post",
				dataType:"json",
				success:function(res){
					if(res){
						layer.close(indexupdate);
						tableBookinfo.reload();
					}else{
						layer.msg("修改失败");
					}
						
				}
			})
			
		  }

	  //添加方法
	  function saveBook(){
		var bookid=$("#bookid2").val();
		var bookname=$("#bookname2").val();
		var bookauthor=$("#bookauthor2").val();
		var bookpress=$("#bookpress2").val();
		var booknum=$("#booknum2").val();
		var bookcate=$("#bookcate2").val();
		var bookmessage=$("#bookmessage2").val();
		var bookprice=$("#bookprice2").val();
		var bookaddress=$("#bookaddress2").val();
		var onlinenum=$("#onlinenum2").val();
		var borrownum=$("#borrownum2").val();
		$.ajax({
			url:"/booksave",
			data:{
				bookid:bookid,
				bookname:bookname,
				bookauthor:bookauthor,
				bookpress:bookpress,
				booknum:booknum,
				bookcate:bookcate,
				bookmessage:bookmessage,
				bookprice:bookprice,
				bookaddress:bookaddress,
				onlinenum:onlinenum,
				borrownum:borrownum
				
			},
			type:"post",
			dataType:"json",
			success:function(res){
				if(res){
					layer.close(indexsave);
					tableBookinfo.reload();
				}else{
					layer.msg("修改失败");
				}
					
			}
		})
		
	  }

	  //添加弹出层
		 function addbook(){
			  layui.use('layer',function(){
				  var layer = layui.layer;
				  indexsave= layer.open({
				       	type:1,//type必须是一
				           title: '添加学生信息',
				      		area: ['500px', '550px'],
				         content: $('#save')
				       });  
			  })
		  }
	  //借书弹框
			function boroowbook(){
				layui.use('layer',function(){
					  var layer = layui.layer;
					  indexborrow= layer.open({
					       	type:1,//type必须是一
					           title: '填写信息',
					      		area: ['350px', '200px'],
					         content: $('#borrow')
					       });  
				  })
			}
	  function borrow(){
		  var borrowbookid=$("#borrowbookid").val();
		  $.ajax({
				url:"/borrowbook",
				data:{
					bookid:borrowbookid
				},
				type:"post",
				dataType:"json",
				success:function(res){
					if(res){
						layer.close(indexborrow);
						tableBookinfo.reload();
					}else{
						layer.msg("借书失败");
					}
						
				}
		  })
	  }
		
</script>

</body>
</html>